import React, {Component} from "react";
import {Image,  View} from "@tarojs/components";
import {AtInput,  AtButton, AtSteps} from 'taro-ui'
import Taro from "@tarojs/taro";

import './intelligentGuidance2.less'


class IntelligentGuidance2 extends Component{
  constructor () {
    super(...arguments)
    var today = new Date(),
      date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
    this.state = {
      value: '',
      current: 1,
      dateSel: date,//出生日期
      mentype: ['男', '女','儿童'],
      num: '0',
      sex: '男',
      inteTreatInfo: {
        sex: '',
        birth: '',
        uncomfotable: ''
      }
    }
  }

  componentDidMount() {
    Taro.getStorage({
      key: '__userInfo__',
      success:(res)=> {
        this.setState({
          value: res.data.nickName
        })
      }
    })
  }


  handleChange (value) {
    this.setState({
      value
    })
    return value
  }

  onChange (current) {
    this.setState({
      current
    })
  }

  onDateChange = e => {
    this.setState({
      dateSel: e.detail.value
    })
  }

  changeSex(index, gender){
    this.setState({
      num: index,
      sex: gender
    });
  }

  /*点击下一步*/
  toIntelligentGuidance3(){
    Taro.navigateTo({url:'/pages/intelligentGuidance/intelligentGuidance3'});
  }

  render(){
    const items = [
      {title: '已完成', status: 'success'},
      {title: '进行中',status: '',icon:{
      value: 'chevron-down',
        activeColor: '#ff3041',
        inactiveColor: '#563cfa',
        size: '16',}},
      {title: '待进行',},
      {title: '待进行',}
    ]
    let {mentype}=this.state
    return(
      <View>
        <View className='mar-step'>
          <AtSteps
            items={items}
            current={this.state.current}
            onChange={this.onChange.bind(this)}
          />
        </View>

        <View className='at-col at-col-11'>
          <AtInput
            className='dia-pad-msg'
            disabled
            border={false}
            name='value'
            type='text'
            placeholderClass='input-font'
            placeholder='请选择不适部位'
            value={this.state.value}
            onChange={this.handleChange.bind(this)}
          />
        </View>
        <View className='at-row'>
          <View className='at-col'>
            <View className=''>
              {
                mentype.map((gender, index) =>
                {
                  return (
                    <View className=" mentype-center">
                      <AtButton className={(this.state.num === index || this.state.sex === gender) ? 'sex' : 'sex-hover'}
                              onClick={this.changeSex.bind(this, index, gender)}
                      >
                        {gender}
                      </AtButton >
                    </View>
                  )
                })
              }
            </View>
          </View>
          <View className='at-col body-img'>
            <Image style='width:100%' src={require('../../images/u342.png')} />
          </View>
          <View className='at-col'></View>
        </View>
        <View><AtButton type='primary' className='dia-btn' onClick={this.toIntelligentGuidance3.bind(this)}>下一步</AtButton></View>
      </View>
    )
  }
}

export default IntelligentGuidance2
